<template>
	<view class="edit-book-container">
		<nav-bar :title="title" mode="user"></nav-bar>
		<view class="edit-body">
			<view class="edit-pagecount"><text>{{ currentPage + 1 }}</text>/{{ bookData.total_page }}</view>
			<view class="edit-swiper-box">
				<swiper class="edit-swiper" :duration="swiperData.duration" @change="handleChangePage"
					:acceleration="false" :current="currentPage">
					<swiper-item class="edit-swiper-item" v-for="(item, index) in bookData.data" :key="index">
						<view class="edit-swiper-item-box">
							<!-- <view class="decals-wrap"> -->
							<decals ref="decalsRef" @matting="mattingFn" style="margin-top: 25px"
								:selectedFilePath="item.imgUrl" :editType="true" :peopleImg="peopleImg">
							</decals>
							<!-- </view> -->
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- <view @click="handlePickThis()" class="edit-pick-btn" v-if="!isPicked">
				选用此本
			</view> -->
			<image src="../static/bc_hh.png" mode="widthFix"@click="handlePickThis(list.id)" class="edit-pick-btn" v-if="!isPicked"></image>
			<u-modal v-model="modalShow" :content="modalContent" :show-title="false" :show-cancel-button="true"
				@confirm="modalConfirm"></u-modal>
		</view>
		<!-- <view>编辑状态 {{ bookData.data[currentPage].isEdit }}</view> -->
		<view class="edit-tools-bar" v-if="isPicked">
			<view class="edit-tool" @click="chooseImage">
				<image src="../static/btn_icon2.png" mode="widthFix" class="edit-tool-img"></image>
				<view class="edit-tool-text"> 照片 </view>
			</view>
			<view class="edit-tool" @click="chooseMask">
				<image src="../static/btn_icon1.png" mode="widthFix" class="edit-tool-img"></image>
				<view class="edit-tool-text"> 动图 </view>
			</view>
			<view class="edit-tool" @click="showRecording">
				<image src="../static/btn_icon3.png" mode="widthFix" class="edit-tool-img"></image>
				<view class="edit-tool-text"> 录音 </view>
			</view>
			<view class="edit-tool" @click="save">
				<image src="../static/btn_icon4.png" mode="widthFix" class="edit-tool-img"></image>
				<view class="edit-tool-text"> 保存 </view>
			</view>
		</view>

		<!-- 动图 -->
		<mask-list :popupShow="popupShow" @popupClose="popupClose" @selectMask="selectMask"></mask-list>
		<!-- 录音 -->
		<Recording :recordingShow="recordingShow" @closeRecording="closeRecording">
		</Recording>
		<!-- //照片裁剪 -->
		<l-clipper v-if="show==true" :image-url="imageUrl" @success="myUpload" @cancel="show = false" />
		<!-- 保存 -->
		<u-modal v-model="saveModalShow" :content="saveModalContent" :show-cancel-button="true"
			@cancel="cancelSaveModal" @confirm="confirmSaveModal"></u-modal>
	</view>
</template>

<script>
	import NavBar from "components/NavBar";
	import decals from "components/decals/decals";
	import MaskList from "components/MaskList";
	import Recording from "components/Recording";
	import lClipper from "@/components/lime-clipper/index.vue";
	export default {
		components: {
			NavBar,
			decals,
			MaskList,
			Recording,
			lClipper
		},
		data() {
			const bookData = {
				total_page: 4,
				data: [{
						current_page: 1,
						imgUrl: "https://tse1-mm.cn.bing.net/th/id/OIP-C.zyxBdxo6nfJWrtAiLgqtVwHaGF?w=215&h=180&c=7&o=5&pid=1.7",
					},
					{
						current_page: 2,
						imgUrl: "https://tse3-mm.cn.bing.net/th/id/OIP-C.4d7Emr_d4fJnEE6zK7pj_wHaFK?w=286&h=199&c=7&o=5&pid=1.7",
					},
					{
						current_page: 3,
						imgUrl: "https://tse1-mm.cn.bing.net/th/id/OIP-C.idaik32ge-inF9lONSIMjAHaE7?w=253&h=180&c=7&o=5&pid=1.7",
					},
					{
						current_page: 4,
						imgUrl: "https://tse4-mm.cn.bing.net/th/id/OIP-C.uYnOeWfjBHv4LaktA1PTgwHaGF?w=233&h=192&c=7&o=5&pid=1.7",
					},
				],
			};
			return {
				bookData,
				title: "",
				bookId: null,
				isFree: null,
				modalShow: false,
				isPicked: false,
				modalContent: "",
				swiperData: {
					duration: 500,
				},
				// 当前swiper-item的索引
				currentPage: 0,
				prevPage: 0,
				selectedFilePath: "http://cartoon-books-static.ascetic.top/37ba49c7-835b-015c-61cc-b0bd1948e0e6.png",
				peopleImg: "",
				// 挂件列表是否显示
				popupShow: false,
				// 录音是否显示
				recordingShow: false,
				// 确认保存模态窗显示
				saveModalShow: false,
				saveModalContent: "保存并进入下一页",
				//裁剪
				show: false,
				imageUrl: null,
				deatilData: null,
				list:''
			};
		},
		onLoad(option) {
			
			console.log()
			if(JSON.parse(decodeURIComponent(option.param))){
				this.list = JSON.parse(decodeURIComponent(option.param))
				var parm = JSON.parse(decodeURIComponent(option.param))
				console.log(parm)
				this.data = parm.page_video_json.background
			}
		},
		//   computed: {
		//     preventPage() {
		//       if (this.currentPage === 0) {
		//         return 0;
		//       } else {
		//         return this.currentPage - 1;
		//       }
		//     },
		//   },
		methods: {
			//抠图
			mattingFn(localPath, fun) {
				console.log(localPath);
				this.$u
					.post("like_splitting", {
						image_url: localPath,
					})
					.then((res) => {
						fun(res.data.file_path);
					});
			},
			handlePickThis(id) {
				console.log(this.list.id);
				var o = {}
				o.books_id = this.list.id
				this.$u.post("select_user_books_type", o).then((res) => {
					console.log()
					if(res.data){
						
					}
				});
				if (this.isFree == "true") {
					this.modalContent = "此本为免费绘本，确定要选用此本吗？";
				} else {
					this.modalContent = "确定选用此绘本，并在套餐配额中减去一本？";
				}
				this.modalShow = true;
			},
			pickThisReq() {

			},
			// 点击选用此本
			modalConfirm() {
				this.currentPage = 0;
				setTimeout(() => {
					this.isPicked = true;
				}, 0);
				this.bookData.data.map((item, index, arr) => {
					item.isEdit = 0;
				});
			},
			handleChangePage(e) {
				if (e.detail.current == this.prevPage) {
					console.log("向前");
					this.currentPage = e.detail.current;
					this.prevPage = this.currentPage == 0 ? 0 : this.currentPage - 1;
					return;
				}
				this.currentPage = e.detail.current;
				this.prevPage = this.currentPage == 0 ? 0 : this.currentPage - 1;
				if (!this.isPicked || this.bookData.data[this.prevPage].isEdit == 0) {
					// 没点选用此本 || prevPage编辑状态为0：未编辑 ，则正常切换
					return;
				} else if (
					this.bookData.data[this.prevPage].isEdit &&
					this.bookData.data[this.prevPage].isEdit == 1
				) {
					// 编辑状态为1：
					console.log(1);
					this.saveModalShow = true;
				}
			},
			//裁剪
			myUpload(rsp) {
				let _this = this;
				_this.show = false;
				uni.uploadFile({
					header: {
						Authorized: uni.getStorageSync('token')
					},
					url: _this.$url.url + "upload_img",
					filePath: rsp.url,
					name: "file",
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						console.log(res);
						let mask = {
							url: res.data.url,
							tailorUrl: res.data.url,
						};
						_this.selectMask(mask, true);
					},
				});
			},
			chooseImage() {
				let _this = this;
				console.log(uni.getStorageSync('token'))
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						//启动上传等待中...  
						uni.showLoading({
							title: '图片上传中',
						});
						uni.uploadFile({
							url: _this.$url.url + "upload_file_oss",
							filePath: res.tempFilePaths[0],
							name: "file",
							header: {
								'Authorized': uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data);
								console.log(res)
								_this.imageUrl = res.data.url;
								_this.show = true;
								uni.hideLoading();
							},
							fail: function(res) {
								uni.hideLoading();
								that.Tips({
									title: '上传图片失败'
								});
							}
						})
					}
				})
				// uni.uploadFile({
				// 	count: 1,
				// 	sizeType: ["original", "compressed"],
				// 	sourceType: ["album", "camera"],
				// 	success: (chooseImageRes) => {
				// 		console.log(chooseImageRes)
				// 		uni.showLoading({
				// 			title: "加载中",
				// 		});
				// 		uni.uploadFile({
				// 			url: _this.$url.url + "upload_img",
				// 			filePath: chooseImageRes.tempFilePaths[0],
				// 			name: "file",
				// 			header: {
				// 				'Authorized': uni.getStorageSync('token')
				// 			},
				// 			success: (uploadFileRes) => {
				// 				console.log(uploadFileRes)
				// 				let res = JSON.parse(uploadFileRes.data);
				// 				this.imageUrl = res.data.url;
				// 				this.show = true;
				// 				uni.hideLoading();
				// 			},
				// 		});

				// 	},
				// });
			},

			// 控制 maskList 是否显示
			chooseMask() {
				this.popupShow = true;
			},
			popupClose() {
				this.popupShow = false;
			},
			// 选择挂件
			selectMask(mask, isbg = false) {
				this.$refs.decalsRef[this.currentPage].selectMask(mask, isbg);
				this.changeEdit(1);
			},
			// 更改当前page的编辑状态
			changeEdit(state) {
				this.bookData.data[this.currentPage].isEdit = state;
			},
			// 更改当前page的保存状态
			// changeSave() {
			//   this.bookData.data[this.currentPage].isSave = true;
			// },

			// 控制 录音 是否显示
			showRecording() {
				this.recordingShow = true;
			},
			closeRecording() {
				this.recordingShow = false;
			},

			// 保存，跳到下一页
			save() {
				if (this.currentPage < this.bookData.total_page - 1) {
					// this.changeSave();
					this.changeEdit(2);
					this.prevPage = this.currentPage;
					this.currentPage = this.currentPage + 1;
				}
			},
			// showSaveModal() {
			//   console.log(this.bookData.data[this.currentPage].isEdit);
			//   if (this.isPicked && this.bookData.data[this.currentPage].isEdit) {
			//     console.log(this.currentPage);
			//     this.saveModalShow = true;
			//   }
			// },
			confirmSaveModal() {
				this.bookData.data[this.prevPage].isEdit = 2;
				this.prevPage = this.currentPage === 0 ? 0 : this.currentPage - 1;
			},
			cancelSaveModal() {
				this.currentPage = this.currentPage - 1;
				this.prevPage = this.currentPage === 0 ? 0 : this.currentPage - 1;
				setTimeout((r) => {
					this.saveModalShow = false;
				}, 0);
			},

			getBookDetail() {
				this.$u.post("").then(res => {

				})
			}
		},
	};
</script>

<style scoped>
	/* .edit-book-container{
		padding-bottom: 100px;
	} */
	html,
	body {
		height: 100%;
		position: relative;
	}

	.edit-body {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.edit-pagecount {
		margin-top: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.edit-pagecount text {
		color: #92d14f;
	}

	.edit-swiper-box {
		margin-top: 40rpx;
		height: 1000rpx;
		width: 100%;
		/* margin-bottom:0px; */
	}

	.edit-swiper-item {
		width: 100%;
		box-sizing: border-box;
		padding: 0 80rpx;
	}

	.edit-swiper-item-box {
		/* background-color: red; */
		/* height: 100%; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.decals-wrap {
		width: 100rpx;
		height: 100rpx;
	}

	.edit-swiper {
		width: 100%;
		height: 100%;
	}

	.edit-pick-btn {
		/* margin-top: 80rpx;
		height: 80rpx;
		color: #fff;
		padding: 0 80rpx;
		background-color: #92d14f;
		border: 4rpx solid #fff;
		box-shadow: 0 0 10rpx #999;
		text-align: center;
		line-height: 80rpx;
		border-radius: 20rpx; */
		width: 50%;
		height: auto;
		display: inline-block;
		position: fixed;
		left: 25%;
		bottom: 30px;
	}

	.edit-tools-bar {
		width: 100%;
		height: 76px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		bottom: 0rpx;
		background-color: #33cc00;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}

	.edit-tool {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -16px;
	}

	.edit-tool-img {
		width: 100rpx;
		height: 100rpx;
	/* 	border-radius: 50%;
		background-color: red; */
	}

	.edit-tool-text {
		margin-top: 5px;
		color: #fff;
	}
</style>
